<template>
  <div class="page-container ver-layout-center">
    {{testObj}}
    <el-button @click="updateObjData">更新</el-button>
    <router-link :to="{ name: 'transParams', params: { username: 'erina' }}">
      router-link方式跳转
    </router-link>
    <button @click="toPage(transParams)">router传参示例</button>
    <button @click="toPage(childrenDemo)">router-children示例</button>
    <el-button type="primary" size="small" @click="toPage(test)">图片MD5测试</el-button>
    <el-button type="primary" size="small" @click="toPage(pagerUrl)">手机端翻书效果</el-button>
    <el-button type="primary" size="small" @click="toPage(manageUser)">学生管理</el-button>
    <el-button type="primary" size="small" @click="toPage(groupUser)">学生分组</el-button>
    <el-button type="primary" size="small" @click="toPage(playback)">轨迹回放</el-button>
    <div class="hor-layout-center" style="background: #26cbe1;padding: 10px 20px;color: white">
      <div style="margin-right: 10px">验证码校验功能</div>
      <el-button type="primary" size="small" @click="dxYzmTest">顶象验证码</el-button>
      <el-button type="primary" size="small" @click="toPage(slideVerifyTest)">自定义滑动校验组件</el-button>
    </div>
    <el-button type="primary" size="small" v-clipboard:copy="transParams" @click="toPage(jadp)">jadp集成</el-button>
    <el-button id="copyBtn" type="primary" v-throttle size="small" @click="toPage(clipboard2)">剪切板复制功能</el-button>
    <el-button type="success" size="small" @click="toPage(ffmpeg)">ffmpeg功能测试</el-button>
    <el-button type="success" size="small" @click="toPage(refresh)">refresh功能测试</el-button>
    <el-button type="success" size="small" @click="toPage(aliCloud)">阿里云网盘资源</el-button>
    <el-button type="primary" size="small" @click="toPage(relation)">逻辑关系图形化</el-button>
    <el-button type="primary" size="small" @click="toPage(jsonMap)">JSON数据图形化</el-button>
    <el-button type="primary" size="small" @click="toPage(element)">elementui测试</el-button>
    <el-button type="primary" size="small" @click="toPage(maptest)">maptest测试</el-button>
    <el-button type="primary" size="small" @click="toPage(difyTest)">dify测试</el-button>
    <el-dialog title="验证码校验" :visible.sync="dialogVisible">
      <div ref="demo"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      testObj:{a:1,b:2},
      transParams: '/transParams',
      childrenDemo: '/childrenDemo',
      test: '/test',
      groupUser: '/groupUser',
      manageUser: '/manageUser',
      playback: '/playback',
      jadp: '/jadp',
      clipboard2: '/clipboardTest',
      ffmpeg: '/ffmpegTest',
      slideVerifyTest: '/slideVerifyTest',
      refresh: '/refreshTest',
      aliCloud: '/aliCloud',
      relation: '/relation',
      jsonMap: '/jsonMap',
      element: '/element',
      maptest: '/maptest',
      difyTest: '/difyTest',
      dialogVisible: false,
    }
  },
  computed: {
    pagerUrl() {
      if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) return "/pager";
      return "/pagerView";
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    updateObjData(){
      this.testObj.c=3
    },
    toPage(url) {
      this.$router.push(url)
      // this.$copyText(this.jadp)
    },
    dxYzmTest() {
      this.dialogVisible = true
      this.$nextTick(() => {
        console.log("mounted: _dx", _dx);
        _dx.Captcha(this.$refs.demo, {
          appId: "7ddea44a004f2d36723ef1d5a45d8998",
          apiServer: 'https://vip6.dingxiang-inc.com',
          success: token => {
            console.log("token======", token);
            this.dialogVisible = false
            this.$notify({
              title: '验证码-token',
              message: token,
              duration: 0
            });
          }
        });
      })
    }
  }
}
</script>

<style scoped>
.page-container {
  overflow-y: scroll;
}
</style>
